<template>
  <view>
    <view class="search" @click="gotoSearch">
      <view class="searchInput">
        <uni-icons type="search"></uni-icons>
        <text>搜索</text>
      </view>
    </view>
    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'rpx'}">
        <view  @click="addActive(index)" :class="['left-scroll-view-item', index === active ? 'active':'']" v-for="(item, index) in cateList" :key="index">{{item.cat_name}}</view>
      </scroll-view>
      <!-- 右侧的滚动视图区域 -->
      <scroll-view :scroll-top="scrollTop" class="right-scroll-view" scroll-y :style="{height: wh + 'rpx'}">
          <view class="cate-lv2" v-for="(item2, i2) in cateList2" :key="i2">
            <view class="cate-lv2-title">/ {{item2.cat_name}} /</view>
            <view class="cate-lv3-list">
              <!-- 三级分类 Item 项 -->
              <view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3" @click="goGoodsList(item3.cat_id)">
                <!-- 图片 -->
                <image :src="item3.cat_icon"></image>
                <!-- 文本 -->
                <text>{{item3.cat_name}}</text>
              </view>
            </view>
          </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
  import badge from '@/mixins/tabbar-badge.js'
  export default {
    mixins: [badge],
    data() {
      return {
        // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        wh: 0,
        cateList: [],
        active: 0,
        cateList2: [],
        scrollTop: 0
      };
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = (sysInfo.windowHeight-50) * 2
      this.getCateList()
    },
    methods:{
      async getCateList(){
        const { data: { message } } = await uni.$http.get('/api/public/v1/categories')
        this.cateList = message
        this.cateList2 = message[0].children
      },
      addActive(value){
        this.active = value
        this.cateList2 = this.cateList[value].children
        this.scrollTop = this.scrollTop ? 0 : 1
      },
      goGoodsList(id){
        uni.navigateTo({
          url: '/subpkg/goods_list/goods_list?cid=' + id
        })
      },
      gotoSearch(){
        uni.navigateTo({
          url: '/subpkg/goods_search/goods_search'
        })
      },
    }
  }
</script>
<style lang="scss">
  .search {
    padding: 0 20rpx;
    display: flex;
    align-items: center;
    height: 100rpx;
    background-color: #ffbd27;
    .searchInput {
      width: 100%;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      border-radius: 30rpx;
      text{
        margin-left: 10rpx;
        font-size: 24rpx;
      }
    }
  } 
  .scroll-view-container {
    display: flex;
  
    .left-scroll-view {
      width: 240rpx;
      background-color: #f7f7f7;
  
      .left-scroll-view-item {
        line-height: 120rpx;
        text-align: center;
        font-size: 24rpx;
  
        // 激活项的样式
        &.active {
          background-color: #ffffff;
          position: relative;
          color: #ffbd27;
  
          // 渲染激活项左侧的红色指示边线
          &::before {
            content: ' ';
            display: block;
            width: 6rpx;
            height: 60rpx;
            background-color: #ffbd27;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
    .right-scroll-view {
      .cate-lv2-title {
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        padding: 15px 0;
      }
      .cate-lv3-list {
        display: flex;
        flex-wrap: wrap;
      
        .cate-lv3-item {
          width: 33.33%;
          margin-bottom: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;
      
          image {
            width: 60px;
            height: 60px;
          }
      
          text {
            font-size: 12px;
          }
        }
      }
    }
  }
</style>